<template>
	<view :style="'background: url(' + vipimg + ') no-repeat;background-size:contain;height:' + systemInfo.screenHeight + 'px;'">
		<u-navbar title=" " :autoBack="true" bgColor="transparent" leftIconColor="#fff" fixed></u-navbar>
		<view class="" style="padding-top: 500rpx;padding-bottom: 200rpx;" v-if="$userInfo.level == 5">
			<view class="header p-30">
				俱乐部特色
			</view>
			<view class="" style="margin-top: 60rpx;">
				<!-- <view @click="jump(item)" class="" v-for="(item,index) in list">
					<image :src="item.image" style="width: 100%;height: 300rpx;margin-top: 120rpx;" mode="widthFix">
					</image>
				</view> -->
				<u-swiper @click="click" interval="1500" :list="list" height="200" keyName="image" previousMargin="30" nextMargin="30"
					circular radius="5" bgColor="transparent"></u-swiper>
			</view>
		</view>
		<view class="" v-else>
			<image :src="vipimg" style="width: 100%;" mode="widthFix"></image>
		</view>
		<u-overlay :show="overlayShow" @click="overlayShow = false">
			<view class="warp" @tap.stop>
				<image :src="vipimg" mode=""></image>
				<view @click="url1('/pages/mine/vip?current=4')" class="mt-30">
					<u-button :color="$u.color.color" shape="circle" text="开通至尊会员"
						:customStyle="{'width':'300rpx'}"></u-button>
				</view>
			</view>
		</u-overlay>
		<view class="bottom flex-row align-center justify-between"
			:style="'background: url(' + imgData.vipBottom + ') no-repeat;background-size: contain;'">
			<view class="">

			</view>
			<template v-if="$userInfo.level == 5">
				<view class="" style="margin-left: 60rpx;">
					点击图片查看技师详情
				</view>
				<view></view>
				<!-- <view class="" @click="url1('/pages/mine/vip?current=4')">
					<u-button shape="circle" text="立即入会" color="linear-gradient( 269deg, #884953 0%, #935D65 100%)"
						:customStyle="{'width':'200rpx'}"></u-button>
				</view> -->
			</template>
			<template v-else>
				<view class="" style="margin-left: 60rpx;">
					天子一号房
				</view>
				<view class="" @click="url1('/pages/mine/vip?current=4')">
					<u-button shape="circle" text="立即入会" color="linear-gradient( 269deg, #884953 0%, #935D65 100%)"
						:customStyle="{'width':'200rpx'}"></u-button>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	import {
		staffVipList,
		vipImg
	} from '@/common/api.js'
	import {
		mapState
	} from "vuex";
	import commonMixin from '@/mixins/common.js';
	import img from '@/mixins/img.js';
	export default {
		mixins: [commonMixin, img],
		data() {
			return {
				overlayShow: false,
				tag_id: 0,
				check_state: 0,
				is_share: 0,
				title: "",
				status: 'loading',
				list: [],
				noData: false,
				page: 1,
				total: 0,

				vipimg: "",
				scrollTop: 0
			}
		},
		watch:{
			city(v1,v2) {
				this.init()
			}
		},
		computed: {
			...mapState(["tagData"]),
		},
		onLoad(e) {
			if (this.$userInfo.level != 5) {
				vipImg().then(res => {
					console.log('res', res);
					this.vipimg = res;
					// this.overlayShow = false;
				})
			} else {
				this.vipimg = this.imgData.vipBg1;
				this.init()
			}
		},
		methods: {
			lower() {},
			scroll(event) {},
			//滚动到底部/右边触发
			scrolltolower() {},
			// 滚动到顶部/左边触发
			scrolltoupper() {},
			url1(e) {
				uni.redirectTo({
					url: e
				})
			},
			click(e){
				uni.redirectTo({
					url: `/pages/settle/detail?id=${this.list[e].id}`
				})
			},
			jump(item) {
				if (this.$userInfo.level == 5) {
					uni.redirectTo({
						url: `/pages/settle/detail?id=${item.id}`
					})
				} else {
					this.overlayShow = true
					// uni.redirectTo({
					// 	url:`/pages/mine/vip?current=4`
					// })
				}
			},
			tagClick(item) {
				this.tag_id = item.id
				this.init();
			},
			init() {
				this.status = "loading";
				this.list = [];
				this.page = 1;
				this.noData = false;
				this.getList();
			},
			getList() {
				let vm = this;
				let params = {
					'page': this.page,
					'limit': this.$u.config.limit,
					'tag_id': this.tag_id,
					'check_state': this.check_state,
					'is_share': this.is_share,
					'city':this.city
				};
				staffVipList({
					params
				}).then(res => {
					console.log(res.length);
					if (res.rows.length != 0) {
						this.noData = false;
						this.list = this.list.concat(res.rows);
						this.total = res.total;
						this.page++;
						this.status = "loadmore"
					} else {
						this.noData = true;
						this.status = "nomore"
					}
				}).catch(err => {
					vm.$refs.uToast.show({
						type: 'error',
						message: err.message,
						complete() {
							vm.loading = false;
						}
					})
				})
			},
			//上拉
			onPullDownRefresh() {
				this.status = "loading"
				this.init();
				setTimeout(function() {
					uni.stopPullDownRefresh();
				}, 500);
			},
			//下拉
			onReachBottom() {
				let vm = this;
				this.status = 'loading';
				//延时为了看效果
				setTimeout(() => {
					if (vm.page > Math.ceil(vm.total / this.$u.config.limit)) {
						this.status = 'nomore';
					} else {
						vm.getList();
					}
				}, 200)
			}
		}

	}
</script>
<style>
	page {
		background: #360602;
	}
</style>

<style lang="scss" scoped>
	.tag {
		display: flex;
		flex-direction: row;

		// justify-content: space-between;
		// margin-top: 30rpx;
		&-item {
			border: 1rpx solid #E6E6E6;
			padding: 10rpx 20rpx;
			margin-left: 10rpx;
			color: #575859;
			background-color: #fff;
			border-radius: 30rpx;
			font-size: 24rpx;
			width: 120rpx;
			text-align: center;
		}

		&-item:first-child {
			margin: 0;
		}
	}

	.active {
		color: #A11A0E;
		border-color: #A11A0E;
		background-color: transparent;
	}

	.warp {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.rect {
		width: 120px;
		height: 120px;
		background-color: #fff;
	}

	.header {
		color: #FFDB96;
		font-size: 48rpx;
		font-weight: 700;
	}

	.header::after {
		content: "";
		display: flex;
		height: 5rpx;
		width: 100%;
		background: linear-gradient(90deg, #FFDB96 0%, rgba(153, 131, 90, 0) 100%);
		margin-top: 10rpx;
	}

	.bottom {
		position: fixed;
		width: 100%;
		height: 190rpx;
		bottom: -10rpx;
		left: 0;
		background-size: contain;
		box-sizing: border-box;
		padding: 0 30rpx;
		color: #874852;
		font-weight: 700;
		font-size: 40rpx;
	}
</style>